<!DOCTYPE html>
<title>SVG grid with percentage width</title>
<style type="text/css">
    body { width: 240px; }
</style>
<h1>SVG grid with percentage width</h1>
<p>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 320">
        <rect width="120" height="40" fill="salmon"/>
        <rect x="120" width="120" height="40" fill="purple"/>

        <rect y="40" width="80" height="140" fill="rosybrown"/>
        <rect y="40" x="80" width="80" height="80" fill="pink"/>
        <rect y="120" x="80" width="80" height="60" fill="yellow"/>
        <rect y="40" x="160" width="80" height="80" fill="darkcyan"/>
        <rect y="120" x="160" width="80" height="60" fill="darkgoldenrod"/>

        <rect y="180" width="120" height="40" fill="peachpuff"/>
        <rect y="180" x="120" width="120" height="40" fill="mistyrose"/>

        <rect y="220" width="30" height="60" fill="lightblue"/>
        <rect y="220" x="30" width="90" height="60" fill="orange"/>
        <rect y="220" x="120" width="60" height="60" fill="grey"/>
        <rect y="220" x="180" width="60" height="60" fill="lightgoldenrodyellow"/>

        <rect y="280" width="120" height="40" fill="lightgrey"/>
        <rect y="280" x="120" width="90" height="40" fill="green"/>
        <rect y="280" x="210" width="30" height="40" fill="plum"/>
    </svg>
</p>
